var app = new Vue({
    el: '#app',
    data: {
        matrix_width: 8,
        matrix_height: 8,
        dotDefaultColor: "lightgray",
        dotSelectColor: "black",
        dotMatrixParam: [
            {width: 8, height: 8},
            {width: 8, height: 16},
            {width: 16, height: 8},
            {width: 16, height: 16},
        ],
        OutputList:[]
    },
    created: function () {
        //console.log("create");
        //this.setDefaultDotColor();
    },
    methods: {
        dotMatrixParamSelect: function (ele) {
            this.btnClear();
            var selectItem = this.dotMatrixParam[ele.target.selectedIndex];
            this.matrix_width = selectItem.width;
            this.matrix_height = selectItem.height;
            this.clearOutputArea();
        },
        setDefaultDotColor: function () {
            var allItems = this.$refs.Dot;
            var i = 0;
            for (i = 0; i < allItems.length; i++) {
                allItems[i].style.backgroundColor = this.dotDefaultColor;
            }
        },
        clearAllDotText: function () {
            var allItems = this.$refs.Dot;
            var i = 0;
            for (i = 0; i < allItems.length; i++) {
                allItems[i].innerText = '0';
            }
        },
        btnClear: function (ele) {
            this.setDefaultDotColor();
            this.clearAllDotText();
            this.clearOutputArea();
        },
        addPreZero:function(num,bitNum)
        {

            var len = num.length;
            var i = 0;
            var pre = '';
            if ( len < bitNum)
            {
                for ( i = 0 ; i < bitNum - len ; i++)
                {
                    pre +='0';
                }

            }
            num = pre+num;
            return num;
        },
        btnOk: function (ele) {
            var num = '';
            var i = 0;
            var j = 0;
            //var OutPutList = new Array();
            var allDotRows = this.$refs.DotRow;
            for (i = 0; i < allDotRows.length; i++) {
                for (j = 0; j < allDotRows[i].children.length; j++) {
                    num += allDotRows[i].children[j].innerText;
                }
                num = parseInt(num, 2);
                num = num.toString(16);
                num = this.addPreZero(num,this.matrix_width/4);
                this.OutputList[i]="0x"+num;
                num ='';
            }
            this.printOutputList();
        },
        clearOutputArea:function () {
            this.$refs.OutputArea.innerText = '';
        },
        printOutputList:function () {
            var i = 0;
            var OutPutText = '';
            for ( i = 0; i < this.OutputList.length;i++)
            {
                OutPutText += this.OutputList[i];
                if ( i < this.OutputList.length -1)
                    OutPutText += ",\n";
            }
            this.$refs.OutputArea.innerText = OutPutText;
        },
        clickDot: function (ele) {
            if (ele.target.innerText == '0') {
                ele.target.innerText = '1';
                ele.target.style.backgroundColor = this.dotSelectColor;
            }
            else {
                ele.target.innerText = '0';
                ele.target.style.backgroundColor = this.dotDefaultColor;
            }

        }
    }
})